
<template>
  <div>
    <el-container>

      <el-header>
        <el-menu :default-active="activeIndex"
                 :router='true'
                 class="el-menu-demo"
                 @select="handleSelect"
                 mode="horizontal">
          <el-menu-item index="0">
          </el-menu-item>
          <el-menu-item index="Index">首页</el-menu-item>
          <el-menu-item index="About">心得</el-menu-item>
          <el-menu-item index="StockChange">异动</el-menu-item>
          <el-menu-item index="3"><a href="https://www.ele.me"
               target="_blank">测试</a></el-menu-item>
        </el-menu>

      </el-header>
      <el-main>
        <!-- 在模板中使用 <router-view> 来显示组件 -->
        <router-view></router-view>

      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '/index',
      latestData: '',
    };
  },
  watch: {
    $route () {
      this.setCurrentRoute()
    }
  },
  mounted () {
  },
  created () {
    this.setCurrentRoute()
  },
  methods: {
    handleSelect (key, keyPath) {
      this.activeIndex = key
    },
    setCurrentRoute () {
      this.activeIndex = this.$route.name;//关键   通过他就可以监听到当前路由状态并激活当前菜单
    }

  }
}
</script>

<style>
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #ffffff;
  color: #333;
}
a {
  text-decoration: none;
}
</style>